<template>
  <div class="box">
    <div class="head">
      <van-icon name="arrow-left" @click="router.back()" />
      <span>付款</span>
      <van-icon name="ellipsis" style="transform: rotate(90deg)" />
    </div>
    <p>请选择付款方</p>
    <div class="fukuan"  @click="active=0">
      <div >
        <van-icon name="alipay" style="color: #02a9f1" />&nbsp;&nbsp;
        <span>支付宝支付</span>
      </div>
      <van-icon name="passed" v-show="active == 0" />
    </div>
    <div class="fukuan" @click="active=1">
      <div >
        <van-icon name="wechat" style="color: #07c160" />&nbsp;&nbsp;
        <span>微信支付</span>
      </div>
      <van-icon name="passed" v-show="active == 1" />
    </div>

    <button
      style="
        position: absolute;
        bottom: 20px;
        width: 90%;
        height: 8%;
        border-radius: 15px;
        background-color: #feb800;
        border: none;
        left: 50%;
        transform: translateX(-50%);
        color: aliceblue;
      "
      @click="gopayment"
    >
      下一步
    </button>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
import qs from "qs";
import { v4 as uuidv4 } from "uuid";
import { showToast } from "vant";

axios.defaults.baseURL = "http://127.0.0.1:3000";
const route = useRoute();
const findalData = JSON.parse(route.query.findalData);

const active = ref(-1);
console.log(findalData);

const gopayment = async () => {
  if (active.value == -1) {
    showToast("请选择支付方式");
    return;
  }
  if (active.value == 0) {
    
  
  if (findalData.packinfo) {
    let data = {
      orderId: uuidv4(),
      totalAmount: findalData.packinfo.price,
      subject: findalData.packinfo.name,
      passback_params: JSON.stringify({
        lifaname: findalData.stylist.name,
        address: findalData.stylist.salonId.address,
        phone: findalData.stylist.salonId.phone,
        datetime: findalData.dateTime,
        service: findalData.packinfo.name,
        stylistId: findalData.stylist._id,
        packageId: findalData.packinfo._id,
        salonId: findalData.stylist.salonId._id,
      }),
    };
    await axios({
      url: "/shopfront/api/payment",
      method: "post",
      headers: {
        "content-type": "application/x-www-form-urlencoded",
      },
      data: qs.stringify(data),
    }).then((res) => {
      window.location.href = res.data.result;
      console.log(res.data.result);
    });
  } else {
    let data = {
      orderId: uuidv4(),
      totalAmount: findalData.serviceinfo.price,
      subject: findalData.serviceinfo.name,
      passback_params: JSON.stringify({
        lifaname: findalData.stylist.name,
        address: findalData.stylist.salonId.address,
        phone: findalData.stylist.salonId.phone,
        datetime: findalData.dateTime,
        service: findalData.serviceinfo.name,
        stylistId: findalData.stylist._id,
        serviceId: findalData.serviceinfo._id,
        salonId: findalData.stylist.salonId._id,
      }),
    };
    await axios({
      url: "/shopfront/api/payment",
      method: "post",
      headers: {
        "content-type": "application/x-www-form-urlencoded",
      },
      data: qs.stringify(data),
    }).then((res) => {
      window.location.href = res.data.result;
      console.log(res.data.result);
    });
  }}else if (active.value == 1) {
    showToast("此功能暂未开通");
  }
};
const router = useRouter();
</script>
<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 10px;
  position: relative;
}

.head {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.fukuan {
  width: 100%;
  height: 10%;
  border: 1px solid blanchedalmond;
  font-size: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  margin: 1rem 0;
}
</style>